@extends('wap.layouts.master')
@section('title','约战服务-选择场地')

@section('content')

<div class="aw-main aw-match aw-match-add">
	<!--发布约战-场地信息-开始-->
	<ul class="aw-assest-list aw-add-list aw-mt0">
		<li class="aw-bg-fff aw-list-li aw-add-li aw-mt0">
			<div class="aw-add-li-img"></div>
			<div class="aw-add-li-desc">
				<h4>武汉-青山江滩</h4>
				<div>6v6场地</div>
				<p>剩余 <span class="aw-color-FF5450">2</span> 个</p>
			</div>
		</li>
	</ul>
	<!--发布约战-场地信息-结束-->
	<!--场地选择-开始-->
	<div class="aw-mt10 aw-assest-field-radio" v-for="(list,key) in list_field">
		<div class="aw-field-radio-title" v-for="(li,key_li) in list.list" v-if="key_li==1">@{{list.storefront_name}} @{{list.type_text}} @{{list.number}}号场地</div>
		<ul class="aw-bg-fff aw-field-radio-list">
			<li class="aw-field-radio-li" v-for="(li,key_li) in list.list" v-on:click="Click_Selected(key,key_li,li.status)">
				<a href="javascript:;" class="aw-assest-btn" :class="Class_Status(li.lock,li.order_id,li.status)">@{{li.start_time}}-@{{li.end_time}}</a>
			</li>
				<!--
				<a href="javascript:;" class="aw-assest-btn aw-btn-disable">09:00-11:00</a>
				<a href="javascript:;" class="aw-assest-btn hover">09:00-11:00</a>
				-->
		</ul>
	</div>
	@{{info_selected}}
	<div class="aw-pb20" v-if="!info_selected.start_time"></div>
	<!--场次选择-结束-->
	<!--已选场次-开始-->
	<div class="aw-mt30 aw-assest-field-selected" v-if="info_selected.start_time">
		<div class="aw-field-selected-title">已选场次</div>
		<ul class="aw-bg-fff aw-field-selected-list">
			<li class="aw-field-selected-li">
				<div class="aw-field-selected-adds">@{{info_selected.storefront_name}}<span class="aw-color-666">&nbsp;&nbsp;@{{info_selected.type_text}} (@{{info_selected.number}}号)</span></div>
				<div class="aw-field-selected-time">@{{info_selected.date_info.year}}年@{{info_selected.date_info.month}}月@{{info_selected.date_info.day}}日 @{{info_selected.start_time}}-@{{info_selected.end_time}}</div>
				<div class="aw-color-2 aw-field-selected-money">￥@{{info_selected.price*2}}11222222</div>
				<a href="javascript:;" class="aw-field-selected-del" v-on:click="Del_Selected()"><i class="aw-icon aw-icon-del"></i></a>
			</li>
		</ul>
	</div>
	<!--已选场次-结束-->
</div>

<div class="aw-bg-fff aw-foot-btn aw-foot-btn2">
	<button type="submit" v-on:click="Submit_Next()" class="aw-assest-btn aw-btn-bgcolor-lvse">下一步</button>
</div>

@section('pagejs')
@parent
<script type="text/javascript">
	alert(1)
var MJS_User_Info=GBC_User_Info;
var info_selected_storefront=Get_Browser_Cache('date')
var MJS_URLArry=URLArry;
var Get_form={
	store_id:0,type:0,
}
$.extend(Get_form,MJS_URLArry);
var Vue_Data={
	list_time:{},//获取比赛时段列表
	list_field:{},//获取场地列表 1
	info_selected:{},//已选场次列表
	form:Get_form,//请求参数
};
//获取比赛时段列表
var AD_list_time={
	api:'/api/field/time-list',
	form_data:{},
	tips:false,
}
getData(AD_list_time,function(ajax_data){
	Vue_Data.list_time=ajax_data;
})
//获取场地列表
var AD_list_field={
	api:'/api/team/field-time-list',
	form_data:Get_form,
	tips:false,
}
getData(AD_list_field,function(ajax_data){
	Vue_Data.list_field=ajax_data;
})
vm=new Vue({
	el:'#Vue-body',
	data:Vue_Data,
	methods:{
		Class_Status:function(lock,order_id,status){
			//场地时间
			if(lock==1){
				//锁定
				return 'aw-btn-disable';
			}else if(order_id!=0){
				//已订场
				return 'aw-btn-disable';
			}else if(status==1){
				//打开状态
				return 'open';
			}else if(status==2){
				//禁用状态
				return 'aw-btn-disable'
			}else if(status==4){
				//选中状态
				return 'aw-btn-bgcolor-lvse hover'
			}
		},Click_Selected:function(key,key_li,status){
			//选择场次
			console.log(key,key_li,status)
			var This_list_field=this.list_field[key];
			var Push_data=This_list_field.list[key_li];
			var info_selected=this.info_selected;
			if(Push_data.lock==1){
				return;
			}
			if(Push_data.order_id!=0){
				return;
			}
			if(status==1){
				if(info_selected.start_time){
					this.list_field[info_selected.key].list[info_selected.key_li].status=1;
				}
				Push_data.day=this.form.day;
				Push_data.storefront_name=This_list_field.storefront_name;
				Push_data.number=This_list_field.number;
				Push_data.type_text=This_list_field.type_text;
				Push_data.type=This_list_field.field_type;
				date_info=Get_Browser_Cache('date');
				$.extend(Push_data,date_info);
				Push_data.key=key;
				Push_data.key_li=key_li;
				This_list_field.list[key_li].status=4;
				this.info_selected=Push_data;
			}
			if(status==4){
				This_list_field.list[key_li].status=1;
				this.info_selected={};
			}
		},Form_Time_Val:function(time){
			console.log('time')
			console.log(time)
			if(!time){
				return;
			}
			var list_field=this.list_field;
        	for(var i=0;i<list_field.length;i++){
	        	var list_field_list=list_field[i].list;
	        	for(var ii=0;ii<list_field_list.length;ii++){
	        		var field_list_start_time=list_field_list[ii].start_time;
	        		if(time==field_list_start_time){
	        			this.list_field[i].list[ii].status=1;
	        		}else{
	        			this.list_field[i].list[ii].status=2;
	        		}
	        	}
	        }
		},Del_Selected:function(){
			//删除已选场次
			console.log('删除已选场次')
			var info_selected=this.info_selected;
			console.log(info_selected)
			this.list_field[info_selected.key].list[info_selected.key_li].status=1;
			this.info_selected={};
		},Submit_Next:function(){
			//下一步
			var Team_admin=MJS_User_Info.team_admin;
			if(!this.info_selected.price){
				msgTips('请选择场次')
				return;
			}
			if(!Team_admin){
				msgTips('你不是球队队长,不能发布约战')
				return;
			}
			Post_Browser_Cache('info_order',this.info_selected)
			location.href='/wap/match/add-main';
		}
	}
})
console.log(info_selected_storefront)
setTimeout(function(){
	vm.Form_Time_Val(info_selected_storefront.is_start_time);
},800)
</script>
@endsection

@endsection

